<template>
  <div class="container">
    <el-row>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="姓名：" prop="name">
          <el-col :span="12">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="年龄：" prop="age">
          <el-col :span="12">
            <el-input
              type="age"
              v-model.number="form.age"
              placeholder="请输入年龄"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item class="radio-form" label="性别：" prop="sex">
          <el-col :span="12">
            <el-radio-group v-model="form.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="密码：" prop="password">
          <el-col :span="12">
            <el-input
              type="password"
              v-model="form.password"
              placeholder="请输入密码"
            ></el-input>
          </el-col>
        </el-form-item> -->
        <el-form-item prop="phone" label="手机号：">
          <el-col :span="12">
            <el-input
              v-model="form.phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item
          class="radio-user"
          label="用户类型："
          label-width="70"
          prop="type"
        >
          <el-col :span="12">
            <el-radio-group v-model="form.type">
              <el-radio :label="1">管理员</el-radio>
              <el-radio :label="2">员工</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item
          class="radio-user"
          label="用户权限："
          label-width="70"
          prop="dataAuth"
        >
          <el-col :span="12">
            <el-radio-group v-model="form.dataAuth">
              <el-radio :label="1">个人数据权限</el-radio>
              <el-radio :label="2">全部数据权限</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')" :loading="loading"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import { getDetail, update } from "@/api/user";
import Tinymce from "@/components/Tinymce";
import { Message } from "element-ui";

export default {
  name: "PolicyUpdate",
  components: {
    normalFilter,
    Tinymce,
  },
  data() {
    const _checkPsw = (rule, value, callback) => {
      if (value.length < 6) {
        return callback(new Error("密码长度必须大于6位"));
      }
      callback();
    };
    const _checkPhone = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        return callback(new Error("手机号格式错误"));
      }
      callback();
    };
    return {
      loading: false,
      form: {
        name: "",
        sex: "",
        age: "",
        type: "",
        password: "",
        phone: "",
        dataAuth:""
      },
      rules: {
        name: [{ required: true, message: "姓名不能为空" }],
        age: [
          { required: true, message: "年龄不能为空" },
          { type: "number", message: "年龄必须为数字值" },
        ],
        sex: [{ required: true, message: "选项不能为空" }],
        password: [
          { required: true, message: "密码不能为空" },
          { validator: _checkPsw, trigger: "blur" },
        ],
        phone: [
          { required: true, message: "手机号不能为空" },
          { validator: _checkPhone, trigger: "blur" },
        ],
        type: [{ required: true, message: "选项不能为空" }],
      },
    };
  },
  async created() {
    let { id } = this.$route.params;
    this.id = id;
    let detail = await getDetail({ id });
    if (detail) {
      let { name, sex, age, type, password, phone,dataAuth } = detail;
      this.form = {
        name,
        sex,
        age,
        type,
        password,
        phone,
        dataAuth
      };
    }
  },
  mounted() {
    //   tinymce.init({})
  },
  methods: {
    onSubmit(formName) {
      const { validate } = this.$refs[formName];
      let _this = this;
      validate((valid) => {
        if (valid) {
          this._submitData({
            ..._this.form,
            id: _this.id,
          });
        }
      });
    },
    async _submitData(params) {
      this.loading = true;
      let res = await update(params);
      this.loading = false;
      if (res.code === 1) {
        Message({
          message: "保存成功！",
          type: "success",
          duration: 1 * 1000,
        });
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
}
</style>
